<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 甄成集团</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
    <!-- 字体图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .contact-header {
            background-image:url('images/icons/bg_contact.png');
        }
    </style>
</head>

<body>
    <!-- 导航栏组件 -->
    <div id="navbar"></div>
    <!-- 联系我们头部 -->
    <section class="contact-header header">
        <div class="header-content">
            <div class="page-info">
                <h2>联系我们</h2>
                <p>CONTACT US</p>
                <div class="breadcrumb">
                    <span>您的位置:</span>
                    <a href="index.php">首页</a>
                    <span>/</span>
                    <span>联系我们</span>
                </div>
            </div>
        </div>
    </section>
    <!-- 联系方式信息 -->
    <div id="contact"></div>

<!-- 腾讯地图 -->
<div id="map"></div>
    <!-- 合作伙伴 -->
    <div id="partners"></div>
    <!-- 页脚组件 -->
    <div id="footer"></div>
    <script src="js/loadComponents.js"></script>
</body>

<!-- 腾讯地图 SDK -->
<script>
    // 定义全局回调函数
    window.initTencentMap = function() {
        console.log('Tencent Map SDK loaded successfully');
        
        // 初始化地图
        const map = new TMap.Map('map', {
            center: new TMap.LatLng(39.908823, 116.397470), // 北京市中心坐标
            zoom: 12,  // 缩放级别
            viewMode: '2D'  // 2D模式
        });

        // 创建标记
        const marker = new TMap.MultiMarker({
            map: map,
            styles: {
                "marker": new TMap.MarkerStyle({
                    width: 25,
                    height: 35,
                    anchor: { x: 12.5, y: 35 },
                    src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker.png'
                })
            },
            geometries: [{
                id: 'marker',
                styleId: 'marker',
                position: new TMap.LatLng(39.908823, 116.397470)
            }]
        });

        // 添加信息窗体
        const infoWindow = new TMap.InfoWindow({
            map: map,
            position: new TMap.LatLng(39.908823, 116.397470),
            content: `
                <div style="padding: 10px;">
                    <h3 style="margin: 0 0 5px 0;">振诚科技</h3>
                    <p style="margin: 0;">地址：北京市朝阳区xxx街道xxx号</p>
                    <p style="margin: 5px 0 0 0;">电话：138-8888-8888</p>
                </div>
            `
        });

        // 点击标记时显示信息窗体
        marker.on('click', function(evt) {
            infoWindow.open();
        });

        // 添加地图控件
        map.addControl(new TMap.Control.Zoom());  // 添加缩放控件
        map.addControl(new TMap.Control.Scale()); // 添加比例尺控件

        // 触发自定义事件通知 SDK 已加载
        window.dispatchEvent(new Event('tencentMapLoaded'));
    };

    // 加载腾讯地图 SDK
    (function loadTencentMap() {
        const script = document.createElement('script');
        // 注意：请将 YOUR_KEY 替换为你的腾讯地图 API Key
        // 申请地址：https://lbs.qq.com/
        script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=THNBZ-UZFWF-QG4JH-NXUDJ-GBQ6T-CDBEQ&callback=initTencentMap';
        script.async = true;
        script.onerror = function() {
            console.error('Failed to load Tencent Map SDK');
            // 显示错误提示
            const mapContainer = document.getElementById('map');
            if (mapContainer) {
                mapContainer.innerHTML = '<div style="text-align: center; padding: 20px; color: #666;">地图加载失败，请稍后重试</div>';
            }
        };
        document.head.appendChild(script);
    })();
</script>
  
</html> 